@font-face { font-family: 'kg_always_a_good_timeregular'; src: url('fonts/kgalwaysagoodtime-webfont.eot'); src: url('fonts/kgalwaysagoodtime-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/kgalwaysagoodtime-webfont.woff') format('woff'), url('fonts/kgalwaysagoodtime-webfont.ttf') format('truetype'), url('fonts/kgalwaysagoodtime-webfont.svg#kg_always_a_good_timeregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: "Ionicons"; src: url("fonts/Ionicons/ionicons.eot"); src: url("fonts/Ionicons/ionicons.eot#iefix") format("embedded-opentype"), url("fonts/Ionicons/ionicons.ttf") format("truetype"), url("fonts/Ionicons/ionicons.woff") format("woff"), url("fonts/Ionicons/ionicons.svg#Ionicons") format("svg"); font-weight:normal; font-style:normal; } /* ================================================================================ ===== CSS STYLES FOR ===== ===== SCHOOLWEBSITE.NU SKIN ===== ================================================================================ */ /* BLAUW - bg header visual : #86c2eb BLAUW - balk onder visual top : #008ad1 CYAAN - onder balk, intro tekst : #c8e8fb BLAUW - donker tekst : #2c2e83 */ /* ================================================================================ GENERAL SETTINGS ================================================================================ */ html { height: 100%; /* om hoogte op 100% te zetten in geval van te weinig content */ margin:0px; padding:0px; overflow-y: scroll; /* Altijd een scrollbalk afdwingen i.v.m. verspringingen */ } #Body, body, .Normal, .pubSummary, .pmsb_wrap span { /* om hoogte op 100% te zetten in geval van te weinig content */ text-align: left; font-family:'Advent Pro', Helvetica, sans-serif; line-height: 1.3; font-weight:500; color:#2c2e83; font-size:18px; } table { font-size: 18px; } /* om de lettergrootte in de editor gelijk te zetten */ table tr td { vertical-align:top;} #Body {height: 100%; text-align:center; background:#fff; } /* Achtergrondkleuren + afbeeldingen hier */ #Form { height: 100%; min-height:100%; } /* om hoogte op minimaal 100% te zetten, mag wel groter */ /* HEADINGS + ANDERE TITELJES !! */ H1, H2, H3, H4, H5, .pubTitle, .pubLeesM, .pbContent div { font-family:'Advent Pro',Arial, sans-serif; font-weight:bold; font-weight:700; line-height:1.2; } H1 {font-size:21px; } H2 {font-size:19px; } H3 {font-size:17px; } H4 {font-size:14px; } H5 {font-size:12px; } /* LINKS */ a, a:link {color: #f49b00; text-decoration: none; } /* was 5f599b */ a:visited {color: #f49b00; } a:hover {color: #000000; text-decoration: none; } a:active {color: #f49b00; } #bar_intro a, #bar_intro a:link { color:#5f599b; } #bar_intro a:hover, #bar_intro a:active { color:#f49b00; } /* DNN SPECIFIC */ .Head, .SubHead, .SubSubHead, .Head { font-size: 14px; } /* style for module titles */ .SubHead {font-size: 13px; } /* style of item titles on edit and admin pages */ .SubSubHead { font-size: 12px; } /* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */ .Normal { } .NormalTextBox { xfont-size: 13px; } /* text style used for textboxes in the admin and edit pages, for Nav compatibility */ .NormalRed { xfont-size: 13px; } .NormalBold { xfont-size: 13px; font-weight:bold; } .CommandButton { } /* text style for buttons and link buttons used in the portal admin pages */ A.CommandButton:link { } /* hyperlink style for buttons and link buttons used in the portal admin pages */ A.CommandButton:visited { } A.CommandButton:hover { } A.CommandButton:active { } .StandardButton { } /* button style for standard HTML buttons */ /* COMMON ISSUES */ img {border: 0px;} /* geen standaard rand bij afbeeldingen wanneer er gelinkt wordt */ input[type=text]:focus, #Search .NormalTextBox:focus { background-color:#f9f9f9;} .photo_198 {border:none;} /* standaard geen border om de foto's in de simple gallery lastest */ ul { list-style-type: disc; } /* ================================================================================ IMPORTANT DNN FIXES ================================================================================ */ .icr_edit_fieldset .RadEditor.Default.reWrapper {width:300px !important;} /* IE fix VERY IMPORTANT */ .dnnFormItem .NewsletterEditor, .dnnFormItem .NewsletterEditor .RadEditor{width:620px !important; min-width:620px !important;} .icr_edit_fieldset .RadEditor.Default.reWrapper {width:300px !important;} /* ================================================================================ MAIN LAYOUT ================================================================================ */ .ControlPanel { } #Wrapper div { background-repeat:no-repeat; } #Wrapper { xmin-height:100%; /* geen stickey footer */ text-align: left; position: relative; background:#fff; } /* big visuals (foto's niet te breed, dan cover de boven en onderkant weg, mist je de gezichten / ogen */ #Body { background:#808080; /* background:linear-gradient(left, #e0e0e0 0%, #ffff00 5%, #ffffff 95%, #e0e0e0 100%); */ height:100%; } #Wrapper { max-width:1600px; margin:0px auto; -ms-box-shadow:0px 0px 40px 0px #303030; -webkit-box-shadow:0px 0px 40px 0px #303030; box-shadow:0px 0px 40px 0px #303030; } /* max width 1600px */ .Blok * { transition:all 0.1s ease; } .dnnEditState .Blok * { transition:none; } div { background-repeat:no-repeat; } /* HEADER SECTION */ #HeaderWrap { min-height:575px; width:100%; /* gele balk 40px; + 450px foto */ display:inline-block; overflow:visible; /* background-size:auto 102%; */ background-color:#86c2eb; } .isSeq #HeaderWrap { min-height:200px; } .logoKlik { display:block; position:absolute; height:145px; width: 237px; z-index:950; } .LEFTOUT { left:-10px; } /* logo boven en seq. footer adres geg "spalsh wolk" */ #HeaderBalkWrap { width:100%; height: 40px; } #HeaderBalk {} .ww960 { max-width:960px; margin: 0px auto; position:relative; overflow:visible; } .wwL, .wwR { float:left; position:relative; display:inline-block; height:inherit; } .ww100 { width:100%;} .ww50 { width:50%;} .ww33 { width:33%; } .ww66 { width:66%; } .wwR { float:right; } .wwClear { clear:both; } /* --- Login Key --- */ #Login { width: 18px; height: 18px; position:absolute; top:150px; left:20px; z-index:950;} .LoginKey, .LoginKey:visited, .LoginKey:active { width: 18px; height: 18px; font-size: 18px; display: inline-block; background-image: url(images/login.png); background-repeat: no-repeat; } .LoginKey:hover { width: 18px; height: 18px; font-size: 18px; background-position: 0px -19px; background-repeat: no-repeat; text-decoration: none !important; } /* ALLEN BIJ VERY SMALL. LOGO BOVEN "ALLES" */ #HeaderWrap { padding:0px; } /* #HeaderLogoRespWrap { height:100px;padding-bottom:10px; border-bottom:3px solid #ffffff; display:none; } #HeaderLogoRespWrap .logoKlik { height:inherit; } #HeaderLogoRespWrap .logoKlik img { height:inherit; } */ #HeaderWrapInner { display:block; max-width:960px; position:abolute; margin:0px auto; min-height:inherit; height:inherit; overflow:visible; /* background:url(images/cartoon1.png) center 105px; */ } /* geplaatst in slider pane, zelfde positionering bij resp */ #headSeqKids { position:relative; margin:0px auto; overflow:visible;display:block; /* trickey styling, typisch Bart, goed responsive direct */ background:url(images/headSeqKids2.png) no-repeat right bottom; max-width:98%; /* zorgt voor witruimte rechter kind bij responsive gaan */ width:920px; /* zorgt voor witruimte rechter kind bij desktop */ height:145px; min-height:inherit; top:10px; /* overlap hand van rechter kind met blauwe balk +++ RESPONSIVE */ } #headWebred { display:block; position:absolute; z-index:960; color:#ffffff; height:50px; width:200px; top:165px; } /* ---------------------- LINKS / KNOPPEN ---------------- */ /* algemeen intro + baralg */ #headIntro a , #barAgd .ModDNNHTMLC a, #barAgd .eventitem a, /* niet-bestuur kalender */ #barAgd input[type=text], /* niet bestuur form */ .SubscriptionActions a, /* inschrijven nieuwsbrief */ a.knop, .pubReturnLink a,.pubSummary a { background:#ffffff; display:inline-block; margin-top:10px; line-height:20px; padding:5px 10px; font-size:18px; /* font-family: 'Advent Pro', Arial, sans-serif; */ color:#ffffff; border-radius:15px; border-radius:13px / 16px; font-weight:400; } .pubSummary a, .pubReturnLink a { transition:all 0.1s ease; margin-top:10px; } .pubSummary a:hover, .pubSummary a:active, .pubReturnLink a:hover, .pubReturnLink a:active { background:#f49b00!important; font-weight:bold; font-weight:500!important;} #barAgd .eventitem a, #barAgd .ModDNNHTMLC a { background:rgba(255,255,255,.33); font-family:'Advent Pro',Arial, sans-serif; font-size:20px; font-weight:bold; font-weight:500; } #barAgd .eventitem a { padding:10px; font-size:23px; } #barAgd .eventitem .time { font-weight:700; } #barAgd .eventitem a:hover, #barAgd .eventitem a:active, #barAgd .ModDNNHTMLC a:hover, #barAgd .ModDNNHTMLC a:active { background:#008ad1; } #barFoto .ModDNNHTMLC a:hover, #barFoto .ModDNNHTMLC a:active { color:#008ad1; } /* zelf in te stellen en ook in gebruik HOME INTRO KNOPPEN ... */ a.knopRood , a.knopPaars, a.knopBlauw, a.knopGeel, a.knopGroen { /* -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2); -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2); -moz-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2); box-shadow:0px 0px 15px 0px rgba(0,0,0,.2); */ } a.knopGroot /* home > lee meer over groepsnieuws etc. */ { font-family:'Short Stack'; font-size:24px; font-weight:400; } a.knopGroot:hover, a.knopGroot:active { background:transparent!important; } a.knopRood { background:#e40050; } a.knopPaars { background:#941b80; } a.knopBlauw {background:#0069b3; } a.knopGeel { background:#f6a500; } a.knopGroen {background:#76b72a; } a.knopRood:hover, a.knopRood:active { color:#e40050; } a.knopPaars:hover, a.knopPaars:active { color:#941b80; } a.knopBlauw:hover, a.knopBlauw:active {color:#0069b3; } a.knopGeel:hover, a.knopGeel:active { color:#f6a500; } a.knopGroen:hover, a.knopGroen:active {color:#76b72a; } a.knopRood:hover, a.knopRood:active { background:#ffffff; -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #e40050; -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #e40050; -moz-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #e40050; box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #e40050; } a.knopPaars:hover, a.knopPaars:active { background:#ffffff; -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #941b80; -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #941b80; -moz-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #941b80; box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #941b80; } a.knopBlauw:hover, a.knopBlauw:active { background:#ffffff; -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #0069b3; -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #0069b3; -moz-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #0069b3; box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #0069b3; } a.knopGeel:hover, a.knopGeel:active { background:#ffffff; -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #f6a500; -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #f6a500; -moz-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #f6a500; box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #f6a500; } a.knopGroen:hover, a.knopGroen:active { background:#ffffff; -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #76b729; -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #76b729; -moz-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #76b729; box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #76b729; } /* specifiek stylen */ /* witte vlakken met gekleurde knoppen */ .cms_ROOD a.knop { background:#e74e0f; color:#ffffff; } .cms_ROOD a:hover, .cms_ROOD a:active, .cms_ROOD .ModDNNHTMLC a:hover, .cms_ROOD .ModDNNHTMLC a:active { background:#e40050;} .cms_ROOD a.knop:hover, .cms_ROOD a.knop:active { background:#008ad1; } /* hover blauw */ .cms_ROOD a.knopGroot { color:#e74e0f; } .cms_ROOD a.knopGroot:hover, .cms_ROOD a.knopGroot:active { color:#008ad1; } .cms_GEEL a.knop { background:#f49b00; color:#ffffff; } .cms_GEEL a:hover, .cms_GEEL a:active, .cms_GEEL .ModDNNHTMLC a:hover, .cms_GEEL .ModDNNHTMLC a:active { background:#f49b00;} .cms_GEEL a.knop:hover, .cms_GEEL a.knop:active { background:#008ad1; } /* hover blauw */ .cms_GEEL a.knopGroot { color:#f49b00; } .cms_GEEL a.knopGroot:hover, .cms_GEEL a.knopGroot:active { color:#008ad1; } /* bg kleuren */ .cms_bgROOD { color:#ffffff; } .cms_bgROOD a.knop { color:#e40050; } .cms_bgROOD a.knop:hover, .cms_bgROOD a.knop:active, .cms_bgROOD .eventitem a:hover, .cms_bgROOD .eventitem a:hover *, .cms_bgROOD .eventitem a:active, .cms_bgROOD .eventitem a:active *, .cms_bgROOD .SubscriptionActions a:hover, .cms_bgROOD .SubscriptionActions a:active { color:#ffffff!important; background:#f6a500!important; } /* hover geel */ .cms_bgGROEN { color:#ffffff; } .cms_bgGROEN a.knop { color:#76b72a; } .cms_bgGROEN a.knop:hover, .cms_bgGROEN a.knop:active, .cms_bgGROEN .eventitem a:hover, .cms_bgGROEN .eventitem a:hover *, .cms_bgGROEN .eventitem a:active, .cms_bgGROEN .eventitem a:active *, .cms_bgGROEN .SubscriptionActions a:hover, .cms_bgGROEN .SubscriptionActions a:active { color:#ffffff!important; background:#e40050!important; } /* hover rood */ .cms_bgGEEL { color:#ffffff; } .cms_bgGEEL a.knop { color:#f6a500; } .cms_bgGEEL a.knop:hover, .cms_bgGEEL a.knop:active, .cms_bgGEEL .eventitem a:hover, .cms_bgGEEL .eventitem a:hover *, .cms_bgGEEL .eventitem a:active, .cms_bgGEEL .eventitem a:active *, .cms_bgGEEL .SubscriptionActions a:hover, .cms_bgGEEL .SubscriptionActions a:active { color:#ffffff!important; background:#e40050!important; } /* hover rood */ .cms_bgBLAUW { color:#ffffff; } .cms_bgBLAUW a.knop { color:#0069b3; } .cms_bgBLAUW a.knop:hover, .cms_bgBLAUW a.knop:active, .cms_bgBLAUW .eventitem a:hover, .cms_bgBLAUW .eventitem a:hover *, .cms_bgBLAUW .eventitem a:active, .cms_bgBLAUW .eventitem a:active *, .cms_bgBLAUW .SubscriptionActions a:hover, .cms_bgBLAUW .SubscriptionActions a:active { color:#ffffff!important; background:#f6a500!important; } /* hover rood */ /* witte knoppen op gekleurde vlakken */ /* .hover_ROOD a:hover, .hover_ROOD a:active { background:#e40050!important; } */ /* --------------------------------- menu holder --------------------------------- */ /* #MenuWrapper { min-height:40px; width:100%; height:auto; z-index:910; min-height:45px; display:block; z-index:9000!important; overflow:visibile; padding-top:10px; } */ #dnn_RadMenu_RadMenu1 { width:auto!important; } #MenuWrapper, #MenuWrapper *, #MobileMenu { z-index:900!important; } /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ #Menu { position: relative; display: inline-block; text-align: left; float:right!important; padding-top:15px; max-width:740px; /* precies ruimte voor logo */ } #dnn_RadMenu_RadMenu1 { display:inline-block!important; float:right!important; /* style>width100% */ /* margin-top indien menu te groot wordt en onder [f] [zoek] valt */ xxborder:1px dotted red; xmax-width:70%; } #Menu ul { width:auto!important; float:right!important; } #Menu ul li { display:inline!important; float:left; padding-bottom:10px; } /* .isLocal .RadMenu_MyMenu .rmRootGroup > .rmItem:nth-child(n+6), .isLocal .RadMenu_MyMenu .rmRootGroup > .rmItem:nth-child(n+6) * { display:none!important; visibility:hidden; } /* laat alleen eerste 5 zien */ /* --------------------------------- KNOPPEN --------------------------------- */ #menuTopKnop { float:right; margin-left:10px; margin-bottom:15px; z-index:900!important; position: relative; display: inline-block; } a.knop { background:rgba(200,0,0,.5); height:30px; line-height:35px; padding-top:0px; margin-top:0px; } a.knopFB {font-family:"Ionicons"; } /* facebook icon */ #HeaderWrapInner a.knop { font-weight:500; background:rgba(255,255,255,.25); padding-left:15px; padding-right:15px; } #HeaderWrapInner a.knop:hover, #HeaderWrapInner a.knop:active { background:#008ad1; ; } #barFoot a.knop { font-weight:500; background:#40a7dd; padding-left:15px; padding-right:15px; font-size:24px; letter-spacing:1px; margin-top:20px; } #barFoot a.knop:hover, #barFoot a.knop:active { background:#86c2eb; } /* --------------------------------- BREADCRUMB SECTION --------------------------------- */ #Breadcrumb { width:100%; padding-top:20px; padding-bottom:40px;} #Breadcrumb a { color:#008cd3; line-height:1; /* font-family: 'Ubuntu', Arial, sans-serif; font-size: 18px; font-weight:500; */ letter-spacing:0; line-height:25px; text-transform:lowercase; padding-top:0px!important;padding-bottom:0px!important; } #Breadcrumb a:hover, #Breadcrumb a:active { color:#d81009!important; } #Breadcrumb .SkinObject, #Breadcrumb .BCHome, #Breadcrumb .BCBullet { color:#008ad1; font-size:20px; line-height:25px; font-weight:700; } #Breadcrumb .BCBullet { vertical-align:-1px; padding: 0px 5px 0px 5px; } /* --------------------------------- ZOEKEN in menu lijst --------------------------------- */ #Search { height:35px; /* < @SIZE */ float:right!important; position: relative; display: inline-block; margin-left:10px; width:160px!important; right:0px; top:0px; background-color:#fff; background-color:rgba(255,255,255,.25); z-index:900!important; border-radius:10px!important; } #Search .NormalTextBox { line-height:35px!important; height:33px!important;/* @SIZE -2px for focus/border */ margin:0px 0px 0px 0px; padding-right:60px!important; padding-left:10px!important; border:none!important; background-color:transparent!important; font-family: 'Ubuntu', Arial, sans-serif;font-size:16px; border-radius:10px!important; border-radius:13px / 16px!important; } #Search .NormalTextBox, #dnn_dnnSEARCH_txtSearch { width:90px!important; } #Search .NormalTextBox::-moz-placeholder { color:#ffffff; color:transparent; } /* Firefox 19+ */ #Search .NormalTextBox:-moz-placeholder { color:#ffffff; color:transparent; } /* Firefox 18- */ #Search .NormalTextBox:-ms-input-placeholder { color:#ffffff; color:transparent; } #Search .NormalTextBox::-webkit-input-placeholder { color:#ffffff; color:transparent; /* conform design */ } #Search .NormalTextBox:not(:focus) { color:#ffffff!important; xxborder-radius:10px!important;} #Search .NormalTextBox:focus { color:#e74e0f!important; background:#ffffff!important; outline: none!important; outline-width:0px!important; height:35px!important; /* < @SIZE */ } #Search .SkinObject { width:25px; height:24px; display:inline-block; position:absolute; top:5px; right:13px; /* < @POS */ font-family: "Ionicons"; color:#ffffff; color:rgb(255,255,255); font-size:22px;line-height:25px; font-weight:bold; } #Search.active .SkinObject /* < eigen jq */ /*, #Search .SkinObject:hover */{color:#e74e0f; } #Search .SkinObject:hover { -o-transform:scale(1.1); -webkit-transform:scale(1.1); transform:scale(1.1); } /* --------------------------------- BLAUWE / GELE BALKEN (ONDER HEADER / BOVEN FOOTER SEQ.) --------------------------------- */ #HeaderWrap_BlauwBalkOnder { height:25px; background:#008ad1; padding:0px; } #balkOnderGeel { height:25px; background:#f49b00; padding:0px; } /* --------------------------------- SHADOWS TOP MENU / GOOGLEMAPS--------------------------------- */ #HeaderWrapInner a.knop, #Search, #Menu .RadMenu_MyMenu .rmLink { box-shadow:0px 1px 2px 0px rgba(0,0,0,.1), 0px 1px 2px 0px rgba(255,255,255,.33) inset; } #map-canvas { box-shadow:0px 1px 2px 0px rgba(0,0,0,.3), 0px -1px 2px 0px rgba(255,255,255,.67); } /* --------------------------------- SHADOWS BLOKKEN / BALKEN --------------------------------- */ /* .wrapShadDown, #MobiNav > li:nth-child(1) { box-shadow:0px 10px 10px -5px rgba(0,0,0,.225) inset; } .wrapShadUp, #MobileMenu { box-shadow:0px -10px 10px -5px rgba(0,0,0,.225) inset; z-index:9; } */ #barAgd { box-shadow:0px 5px 15px 0px rgba(0,0,0,.175),0px -5px 15px 0px rgba(0,0,0,.175); z-index:9; } .isHome #barFoot { box-shadow:0px -5px 15px 0px rgba(0,0,0,.175); z-index:9; } /* .isHome #map-canvas > div > div:nth-child(1) > div:nth-child(2) { box-shadow:0px 10px 10px -5px rgba(0,0,0,.3) inset; } / LET OP AFSTELLING MAPS !!!!! / */ /* --------------------------------- CONTENT / PANES --------------------------------- */ /* CONTENT BREED MET BG FOTO */ .ContentHold { width:100%; min-height:100%!important; height:100%!important; position: relative!important; display:inline-block!important; } .ContentHold { } /* PANES SECTION */ #Panes { margin: 0px auto; max-width:960px; background:#ffffff; -webkit-box-shadow:0px 5px 10px 0px rgba(0,0,0,.5); -ms-box-shadow:0px 5px 10px 0px rgba(0,0,0,.5); -moz-shadow:0px 5px 10px 0px rgba(0,0,0,.5); -o-shadow:0px 5px 10px 0px rgba(0,0,0,.5); box-shadow:0px 5px 10px 0px rgba(0,0,0,.5); /* 0px 5px voor shadow in met mobile menu */ /* background-image:url(images/ContentHeaderBG.png); background-repeat:no-repeat; ronde hoek oud*/ width:100%; max-width:960px; overflow:hidden; padding:0px; height:auto!important; position: relative;display:block; } /* --------------------------------- cms module --------------------------------- */ #SeqBlok .Normal { overflow:hidden; } /* te grootte afbeeldingen kappen */ h1, h2, h3, h4, h5 { margin-top:15px; margin-bottom:15px; font-family:'kg_always_a_good_timeregular',Arial, sans-serif; } /* style : dnn_ctr{tabid}_EditHTML_txtContent_txtContent > height weg, min-height weg */ #dnn_ContentPane > h1, h1 { font-size:52px; color:#e74e0f; font-weight:500; padding-bottom:20px; letter-spacing:1px; line-height:.95; } #dnn_ContentPane > h2, h2 { font-size:26px; color:#e74e0f; font-weight:500; margin-bottom:10px; padding-top:10px; } #dnn_ContentPane > h3, h3 { font-size:20px; color:#008ad1; font-weight:500; } #dnn_ContentPane > h4, h4 { font-size:18px; color:#008ad1; font-weight:400; } #dnn_ContentPane > h5, h5 { font-size:16px; color:#941b80; font-weight:400; } /* home page kleine blokken: */ .ww50 h1, .ww50 h2, .ww50 h3 { font-family:'Short Stack',Arial, sans-serif; margin-bottom:5px; padding-bottom:0px; padding-top:0px; } .ww50 h1 { font-size:45px; color:#2c2e83; } .ww50 h2 { font-size:28px; color:#008ad1; } .ww50 h3 { font-size:15px; color:#008ad1; } /* home intro tekst */ #bar_intro h1 { margin-bottom:0px; color:#2c2e83; padding-bottom:0px; } #bar_intro h2 { margin-bottom:20px; color:#e74e0f; padding-bottom:0px; font-family:'Short Stack',Arial, sans-serif; } #LeftMenu h2 { margin-left:0px; font-size:28px; color:#2c2e83 } /* kleiner dan ontwerp??, kan veel tekst staan... */ .Blok h3 { font-size:18px; margin-top:15px; margin-bottom:5px; } /* .Blok h3 { min-height:40px; font-size:26px; margin-top:0px; margin-bottom:10px; } TODO TODO TODO TODO TODO TODO TODO TODO TODO TODO TODO TODO TODO TODO */ .Wrap { clear:both; display:inline-block; position:relative; width:100%; margin:0px; height:auto; min-height:auto; /* CSS responsive */ } .rijWrap { background:#ffffff; } .rijWrap { margin-top:0px; } .bigWrap { padding:50px 0px; background-repeat:no-repeat; background-position:center center; background-size:1400px auto; /* auto 102%; */ background-size:cover; /* auto 102%; */ } .isSeq #HeaderWrap .bigWrap { background:#dd0000; } .Blok { width:100%; max-width:960px; margin:0px auto; display:block; position:relative; padding:0px; } .BlokCenter { text-align:center; } .ww50.wwR .Vlak { float:right; } .ww50 > .Vlak { width:100%; max-width:450px; /* RESP !*/ } /* ================================================================================================================================================================ HOME HTML DESIGN ================================================================================================================================================================ */ .bigFoto1 { } /* %%%%%%%%%%%%%%%%%%%%%%%% HOME INTRO TEKST %%%%%%%%%%%%%%%%%%%%%%%% */ #bar_intro { background:#c8e8fb; } #bar_intro .Normal { line-height:1.75; } #bar_intro .Normal { font-size:15px; } /* %%%%%%%%%%%%%%%%%%%%%%%% SOCIAL MEDIA ICONS (INTRO TEKST + FOOTER WOLK) %%%%%%%%%%%%%%%%%%%%%%%% */ .SW02 .smTW { background-image:url(images/socmTW_blauw.png); } /* twitter kleur bij intro-tekst-home en bij footer wolk */ .SW02 .smFB { background-image:url(images/socmFB_geel.png); } .SW03 .smTW { background-image:url(images/socmTW_paars.png); } .SW03 .smFB { background-image:url(images/socmFB_blauw.png); } .SW04 .smTW { background-image:url(images/socmTW_groen.png); } .SW04 .smFB { background-image:url(images/socmFB_geel.png); } .SW05 .smTW { background-image:url(images/socmTW_rood.png); } .SW05 .smFB { background-image:url(images/socmFB_blauw.png); } .SW06 .smTW { background-image:url(images/socmTW_groen.png); } .SW06 .smFB { background-image:url(images/socmFB_rood.png); } /* %%%%%%%%%%%%%%%%%%%%%%%% HOME INTRO > OVERZICHT SCHOLEN (BESTUUR) %%%%%%%%%%%%%%%%%%%%%%%% */ #bar_intro { padding:45px 0px 35px 0px; } #bar_intro .Normal p, #bar_intro .Normal div { text-align:center; font-size:24px; } #bar_intro .Normal a {font-weight:bold; margin-top:12px;} #bar_intro .Normal a:hover, #bar_intro .Normal a:active { color:#f49b00; } /* %%%%%%%%%%%%%%%%%%%%%%%% NIEUWS %%%%%%%%%%%%%%%%%%%%%%%% */ #barNews { min-height:100px; } /* .SW01 */ #barNews { background:#ffffff;} /* %%%%%%%%%%%%%%%%%%%%%%%% TWEEDE RIJ (b.v. WERKEN BIJ (module r, 2 items) %%%%%%%%%%%%%%%%%%%%%%%% */ #barAgd { background:#f49b00; } /* ================================================================================================================================================================ STYLING BARS HOME ================================================================================================================================================================ */ /* ***************************************************** NIEUWS ***************************************************** */ #barNews h1 { /* padding:0px 13px; border-radius:18px; font-weight:normal; font-size: 45px; margin-bottom:13px; */ min-height:100px; /* RESP */ } #barNews .pubItem { background:#ffffff; border-radius:18px; padding:0px; margin-bottom:13px; display:inline-block; width:100%; clear:both; } .pubImg, .pubCont { position:relative; display:inline-block; clear:none; float:left; padding-top:10px; padding-bottom:10px; } .pubImg { width:130px; } .pubCont{ width:285px; /* RESP! */ margin-left:15px; } .pubImg img { width:130px; height:100px; border-radius:12px; } .pubTitle { font-size:25px; padding-top:10px; line-height:1; color:#2c2e83; font-weight:500; } .isHome .pubTitle { min-height:55px; } .isSeq .pubTitle { padding-bottom:10px; } .pubMeta { width:auto; float:left; color:inherit; font-size:15px; font-weight:bold; line-height:35px; padding-top:5px; text-transform:uppercase; } .pubLeesM { width:auto; float:right; } .cms_ROOD h1 { color:#e74e0f; } .cms_ROOD .pubCont { color:#e74e0f; } .cms_GEEL h1 { color:#f49b00; } .cms_GEEL .pubCont { color:#f49b00; } /* .cms_PAARS .pubCont { color:rgb(148,27,128); } .cms_PAARS h1 {background:rgba(148,27,128,.8); } .cms_BLAUW h1 {background:rgba(0,105,179,.8); } .cms_BLAUW .pubCont { color:rgb(0,105,179); } .cms_GROEN h1 {background:rgba(118,183,42,.8); } .cms_GROEN .pubCont { color:rgb(118,183,42); } */ #dnn_ctr7705_Events_EventList_lblNoEvents {color:#e74e0f; } .dnnFormMessage.dnnFormWarning { border:none;} /* ***************************************************** AGENDA ***************************************************** */ #barAgd h1, #barAgd .Normal * { color:#ffffff; } /* alleen bestuur ?! */ .pbItemWrap { display:block; margin-bottom:13px; } .pbContent {background:#ffffff; border-radius:18px; padding:0px; display:inline-block; width:100%; clear:both; } .pbContent div { padding-left:35px; padding-right:35px; font-weight:normal; line-height:1; } .pbContent .pbTitle { padding-top:15px; font-size:24px; } .pbContent .pbSumm { padding-bottom:15px; line-height:30px; font-size:18px; } .pbContent div, #barAgd .ModDNNHTMLC a { color:#ffffff; margin-top:20px; } .pbContent:hover, .pbContent:active { background:#e40050!important; } .pbContent:hover div, .pbContent:active div { color:#ffffff!important; } #barAgd .ModDNNHTMLC a:hover, #barAgd .ModDNNHTMLC a:active { color:#ffffff!important;background:##008ad1!important;} /* #barAgd > .pbContent:hover, #barAgd > .pbContent:hover { background:#e40050!important; color:#ffffff!important; } #barAgd > .pbContent:hover div, #barAgd > .pbContent:active div { color:#ffffff; color:#ffffff!important; } */ /* ------- NIET BESTUUR: KALENDER OVERZICHT / FORMULIER ------- */ #barAgd .eventitem * { letter-spacing:-3px; } #barAgd .eventitem span { letter-spacing:0px; line-height:1!important; } #barAgd .eventitem a { display:block; xxwidth:100%; } .SW02 #barAgd .eventitem * { color:#e40050; } .SW03 #barAgd .eventitem * { color:#76b72a; } .SW04 #barAgd .eventitem * { color:#e40050; } .SW05 #barAgd .eventitem * { color:#f6a500; } .SW06 #barAgd .eventitem * { color:#0069b3; } /* ------- NIET BESTUUR: FORM NIEUWSBRIEF ------- */ #barAgd .SubScriptionTitle { display:none; } #barAgd .SubscriptionActions a { margin-right:15px!important; } .SW02 #barAgd .SubscriptionActions a { color:#e40050; } .SW03 #barAgd .SubscriptionActions a { color:#76b72a; } .SW04 #barAgd .SubscriptionActions a { color:#e40050; } .SW05 #barAgd .SubscriptionActions a { color:#f6a500; } .SW06 #barAgd .SubscriptionActions a { color:#0069b3; } #barAgd input[type=text] { width:100%!important; background-color:rgba(255,255,255,.5)!important; color:#ffffff!important; border:none!important; height:30px!important; line-height:30px!important; outline:none!important; max-width:430px!important;/* RESP! padL/R=10px */ } #barAgd input[type=text]:focus { -webkit-box-shadow:0px 0px 0px 3px #ffffff inset; -ms-box-shadow:0px 0px 0px 3px #ffffff inset; -o-box-shadow:0px 0px 0px 3px #ffffff inset; box-shadow:0px 0px 0px 3px #ffffff inset; color:#ffffff!important; } /* OUD: lijkt te veel op knoppen met volle witte background #barAgd input[type=text]:focus { background-color:rgba(255,255,255,1)!important; } .xxxSW02 #barAgd input[type=text]:focus { color:#0069b3!important; } */ /* ***************************************************** FOTO ***************************************************** */ #barFoto h1 { color:#e74e0f; } #barFoto .ModDNNHTMLC a { margin-top:20px; font-size:22px; color:#e74e0f; } #dnn_barFotoRight .DNNModuleContent img { /* border:1px dashed #a00!important; shadow */ border-radius:16px; -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2); -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2); box-shadow:0px 0px 15px 0px rgba(0,0,0,.2); box-shadow:0px -2px 15px 0px rgba(0,0,0,.2), 0px 0px 5px 0px rgba(0,0,0,.33); } /* ================================================================================================================================================================ /// SEQUEL-PAGE SECTION ================================================================================================================================================================ */ #LeftMenu, #SeqBlok { float:left; } #LeftMenu { width:270px; margin-left:15px; margin-right:55px; padding-top:30px; padding-bottom:15px; } #LeftMenu .Container { margin-top:15px; } #SeqBlok { width:600px; } #SeqBlok, .isSeq #LeftMenu { padding-bottom:180px; } .SeqWhiteSpaceTop { display:block; height:30px; } /* ~~~~~ PUBMOD OVERZICHT FULL-WIDTH ~~~~~ */ #rij_seq .pubItem td { padding:15px 0px; } /* http://stackoverflow.com/questions/8444645/how-to-get-perfect-border-radius-on-images-in-all-browsers */ #rij_seq .pubThumbnail { padding-right:20px!important; } #rij_seq .pubThumbnail .pubLink img { } /* zelde als grote knoppen topmenu */ #rij_seq .pubItemWrap .pubContent div { padding-top:13px; } #rij_seq .pubItemWrap { clear:both; padding-top:3px; } #rij_seq .pubThumbnailImage { display:block; border-radius:10px!important; width:172px; border:solid 4px #ffffff; -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.25); -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.25); -o-box-shadow:0px 0px 15px 0px rgba(0,0,0,.25); -moz-box-shadow:0px 0px 15px 0px rgba(0,0,0,.25); box-shadow:0px 0px 15px 0px rgba(0,0,0,.25); } #rij_seq .pubArticleList .pubContent { float:left; width:auto; padding-left:13px; } .pubArticleList {} .pubArticleDetails {} #rij_seq .pubTitle { font-family: Ubuntu, Arial, sans-serif; font-size: 22px; font-style: italic; font-weight: bold; color:#40a629; display:block; } #rij_seq a.pubTitle:hover, #rij_seq a.pubTitle:active { color:#ffb300; } #rij_seq .pubArticleList .pubThumbnailImage:hover, #rij_seq .pubArticleList .pubThumbnailImage:active { border-color:#ffb300; } #rij_seq .pubArticleDetails .pubThumbnailImage { margin-right:15px; margin-bottom:15px; width:180px; height:180px; object-fit: contain; background-size: cover; background-position: center center; background-repeat: no-repeat; } #rij_seq .pubArticleDetails .pubMetaData { margin-bottom:15px; } #rij_seq .pubArticleDetails .pubContent { margin-bottom:30px; } .pubReturnLink a { background:#40a7dd; } #rij_seq .pubSummary {margin-top:10px; } #rij_seq .pubSummary a { display:block!important; width:100px; text-align:center; clear:both!important; background:#40a7dd; } #rij_seq .pubMetaData { clear:both; display:block; padding-top:15px; } #rij_seq .pmsb_wrap span { color:#f49b00; } #rij_seq .OuterNavBlockHorizontal span { display:none; } #rij_seq .OuterNavBlockHorizontal a, #rij_seq .pubControls *, #rij_seq .pubMetaData { text-transform:uppercase;color:#999999; font-size:12px; font-family:Verdana; } /* ================================================================================================================================================================ FOOTER SECTION ================================================================================================================================================================ */ /* %%%%%%%%%%%%%%%%%%%%%%%% FOOTER LEFT %%%%%%%%%%%%%%%%%%%%%%%% */ #barFoot { min-height:320px; background:#008ad1; overflow:hidden; /* logo boven buiten balk */ } #barFoot .Blok { font-family: 'Advent Pro', Arial, sans-serif; font-size:17px; font-weight:300; } #barFoot .Adres { padding-top:142px; color:#ffffff; font-size:26px; } #barFoot #footLogo { -webkit-transform:scale(.9) translate(-40px,0px); -webkit-transform-origin:left top; -ms-transform:scale(.9) translate(-40px,0px); -ms-transform-origin:left top; transform:scale(.9) translate(-40px,0px); transform-origin:left top; display:block; } /* %%%%%%%%%%%%%%%%%%%%%%%% FOOTER RIGHT / GOOGLE MAPS %%%%%%%%%%%%%%%%%%%%%%%% */ #footRight { } #bar_maps { background:#f0f0f0; } /* ================================================================================================================================================================ MENU'S ================================================================================================================================================================ */ /* ////////////////////////////////////////// TOP MENU - ROOT ITEMS ////////////////////////////////////////// */ .RadMenu_MyMenu { z-index: 910 !important; display:block; height:90px; } /* naam MyMenu vanwege oude css vulling bij overgang naar nieuwe site */ .RadMenu_MyMenu .rmRootGroup { border-width: 0px !important; background-color: transparent !important; height:90px;} .RadMenu_MyMenu .rmRootGroup .rmItem { margin: 0px; padding: 0px;} /* height:90px x width: 180px daarbinnen border wit */ /* algemeen *** > li > a */ .RadMenu_MyMenu .rmRootGroup .rmItem .rmLink { margin: 0px; padding: 0px; cursor:pointer; text-decoration:none; height:35px; width:auto; /* -2x 4px width */ display: block; xxbackground:#a4d1f0; background-color:rgba(255,255,255,.25); margin-left:12px; color:#fff; } /* algemeen *** > li > a > span */ .RadMenu_MyMenu .rmRootGroup .rmItem .rmLink .rmText { margin: 0px; display: block; white-space: normal; text-align:center; padding:0px 10px; font-size:18px!important; color:inherit!important; font-family:'Advent Pro', sans-serif; font-weight:600; text-decoration: none !important; } /* alleen topmenu */ .RadMenu_MyMenu .rmRootGroup >.rmItem > .rmLink { border-radius:15px; } .RadMenu_MyMenu .rmRootGroup >.rmItem > .rmLink > .rmText { line-height:35px!important; font-size:20px; } /* .RadMenu_MyMenu .rmRootGroup > .rmItem.rmFirst .rmLink .rmText { margin-left:0px; } .RadMenu_MyMenu .rmRootGroup > .rmItem:nth-child(5) .rmLink .rmText { margin-right:0px ; } */ .RadMenu_MyMenu .rmRootGroup .rmLast .rmLink .rmText {border:none; } .RadMenu_MyMenu .rmRootGroup .rmItem .rmLink:hover { background:#f49b00; } .RadMenu_MyMenu .rmRootGroup .rmItem .rmLink:hover .rmText { } .isLocal .RadMenu_MyMenu .rmRootGroup > .rmItem:nth-child(3),.isLocal .RadMenu_MyMenu .rmRootGroup > .rmItem:nth-child(3) *, .isLocal .RadMenu_MyMenu .rmRootGroup > .rmItem:nth-child(4),.isLocal .RadMenu_MyMenu .rmRootGroup > .rmItem:nth-child(4) * { display:none!important; } /* ////////////////////////////////////////// TOP MENU - DROPDOWN ITEMS ////////////////////////////////////////// */ .RadMenu_MyMenu .rmGroup, .RadMenu_MyMenu .rmGroup .rmItem { margin: 0px!important; padding: 0px!important; } .RadMenu_MyMenu .rmSlide { padding-right:20px; padding-bottom:40px; /* voorkom afkappen .rmGroup/left:15px en bottom/top pads*/ } .RadMenu_MyMenu .rmSlide .rmGroup { left:13px!important; } .RadMenu_MyMenu .rmSlide .rmGroup .rmGroup { left:0px!important; } .RadMenu_MyMenu .rmSlide .rmGroup, .RadMenu_MyMenu .rmGroup > .rmItem.rmLast > .rmLink { } .RadMenu_MyMenu .rmSlide .rmGroup { background:transparent!important; -webkit-box-shadow:0px 0px 0px 2px #76b729; -ms-box-shadow:0px 0px 0px 2px #76b729; -o-box-shadow:0px 0px 0px 2px #76b729; -moz-box-shadow:0px 0px 0px 2px #76b729; -webkit-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #76b729; -ms-box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #76b729; box-shadow:0px 0px 15px 0px rgba(0,0,0,.2), 0px 0px 0px 2px #76b729; } .RadMenu_MyMenu .rmGroup .rmItem { background:transparent!important; } .RadMenu_MyMenu .rmGroup .rmItem .rmLink { margin: 0px; padding: 0px; cursor:pointer; } /* niet uit hoofdmenu, "herstellen"... */ .RadMenu_MyMenu .rmRootGroup .rmItem .rmGroup .rmItem .rmLink { background:#ffffff!important; color:#0269b4; } .RadMenu_MyMenu .rmRootGroup .rmItem .rmGroup .rmItem .rmLink:active, .RadMenu_MyMenu .rmRootGroup .rmItem .rmGroup .rmItem .rmLink:hover { color:#76b729; } .RadMenu_MyMenu .rmGroup .rmItem .rmLink { padding:7px 10px 8px 0px; margin:0px!important; height:auto; xwidth:200px!important; } .RadMenu_MyMenu .rmGroup .rmItem .rmLink .rmText { margin: 0px; background:transparent!important; white-space:nowrap!important; /* display:block!important; */ /* padding:12px 0px 0px 0px; border:none; border-top:1px solid #fff; */ text-align:left; line-height:15px!important; font-size:13px; } .RadMenu_MyMenu .rmGroup .rmItem.rmFirst .rmLink .rmText { } .RadMenu_MyMenu .rmRootGroup .rmItem .rmGroup .rmItem.rmFirst > .rmLink { padding-top:15px;border-radius:15px 15px 0px 0px; } .RadMenu_MyMenu .rmRootGroup .rmItem .rmGroup .rmItem.rmLast > .rmLink { padding-bottom:15px; border-radius:0px 0px 15px 15px; } .RadMenu_MyMenu .rmRootGroup .rmItem .rmGroup .rmItem.rmFirst.rmLast > .rmLink { border-radius:15px; } /* lonely wolf */ .RadMenu_MyMenu .rmGroup { border-radius:15px!important; } /* .RadMenu_MyMenu .rmRootGroup .rmItem .rmGroup > .rmItem.rmLast .rmLink { border-radius:0px 0px 20px 20px!important; } .RadMenu_MyMenu .rmGroup > .rmItem.rmLast > .rmLink .rmText { padding-bottom:15px;background:#e0e0c0; } */ .RadMenu_MyMenu .rmGroup > .rmItem.rmLast > .rmLink .rmText { } .RadMenu_MyMenu .rmGroup > .rmItem.rmLast > .rmLink .rmText {} /* === Root Items === .RadPanelBar_SubMenu { z-index: 910 !important; width:100% !important; margin: 0px 0 15px 0 !important; padding: 0px !important; border: 0px !important; } .RadPanelBar_SubMenu .rpRootGroup { margin: 0px !important; padding: 0px !important; border: 0px !important; } .RadPanelBar .rpItem { border: 0px !important; margin-bottom:2px!important; } .RadPanelBar .rpItem, .RadPanelBar .rpItem * { height:auto!important; min-height:auto!important; max-height:auto!important; } */ /* ////////////////////////////////////////// WIJD (bij kalender... TODO?!) ////////////////////////////////////////// */ .isWijd #LeftMenu { display:none; } .isWijd #SeqBlok { width:97%; padding-left:3%; padding-left:0px; } .isWijd .ContentPane { max-width:100%; padding:0px; } /* ////////////////////////////////////////// SEQUAL PAGES - LEFTMENU ////////////////////////////////////////// */ .RadPanelBar_LeftMenu .rpRootGroup { max-width:230px; border:none!important; } .RadPanelBar_LeftMenu .rpRootGroup .rpItem .rpLink { border:none !important; cursor:pointer; background-color:transparent!important; background-repeat:no-repeat; background-position:175px center; display:inline-block; white-space: normal; width:auto; padding-top:20px; } .RadPanelBar_LeftMenu .rpRootGroup .rpItem .rpLink.rpExpandable .rpExpandHandle { background:url(images/MenuExpandableC.png) no-repeat right 3px; } .RadPanelBar_LeftMenu .rpRootGroup .rpItem .rpLink.rpExpanded .rpExpandHandle { background-image:url(images/MenuExpandedC.png); } .RadPanelBar_LeftMenu .rpRootGroup .rpItem .rpLink .rpOut { margin: 0px !important; padding: 0px !important; border: 0px !important; display: block; } .RadPanelBar_LeftMenu .rpRootGroup .rpItem .rpLink .rpOut .rpText { padding:0px 0px 0px 0px!important; border: 0px !important; display:inline-block; white-space: normal; width:auto; max-width:auto; min-width:50px; min-height:25px; line-height:25px; font-weight:normal; font-size: 20px!important; font-family: 'Advent Pro',Arial; font-weight: 700; color:#008ad1; } /* MAIN LINK SUB ACTIVE : rpLink rpExpandable rpSelected rpExpanded > span rpOut rpNavigation */ /* MAIN LINK ACTIVE : rpLink rpExpandable rpSelected rpExpanded > span rpOut rpNavigation */ .RadPanelBar_LeftMenu .rpRootGroup .rpSelected .rpOut .rpText { color:#2c2e83!important; } /* inspring bullet bij subpagina's */ .RadPanelBar_LeftMenu .rpRootGroup .rpGroup .rpItem .rpOut .rpText { xpadding:2px 0px 3px 0px!important; } .RadPanelBar_LeftMenu .rpRootGroup .rpGroup .rpItem .rpLink .rpText:before { /* content:"\f10a"; font-family: "Ionicons"; display:inline-block; position:relative; left:-5px; top:0px; font-size:18px; float:left; color:inherit; */ } .RadPanelBar_LeftMenu .rpRootGroup .rpGroup .rpItem .rpLink { padding-top:10px; } .RadPanelBar_LeftMenu .rpRootGroup .rpGroup .rpItem .rpLink .rpText { padding-left:15px!important; padding-right:10px!important; background:url(images/MenuLeftSub1.png) no-repeat 0px 5px; color:#e74e0f; } .RadPanelBar_LeftMenu .rpRootGroup .rpGroup.rpLevel2 .rpItem .rpLink .rpText { margin-left:15px!important; } .RadPanelBar_LeftMenu .rpRootGroup .rpGroup.rpLevel3 .rpItem .rpLink .rpText { margin-left:30px!important; } .RadPanelBar_LeftMenu .rpRootGroup .rpGroup.rpLevel4 .rpItem .rpLink .rpText { margin-left:45px!important; } .RadPanelBar_LeftMenu .rpRootGroup .rpGroup.rpLevel5 .rpItem .rpLink .rpText { margin-left:60px!important; } .RadPanelBar_LeftMenu .rpRootGroup .rpItem .rpSelected .rpOut .rpText { text-decoration: none !important; xxbackground:#0c3180;} .RadPanelBar_LeftMenu .rpRootGroup .rpItem * .rpText:hover, .RadPanelBar_LeftMenu .rpRootGroup .rpItem * .rpText:active { color:#f49b00!important; /* box-shadow:0px 0px 0px 2px #f29100 inset; */ } .RadPanelBar_LeftMenu .rpRootGroup > .rpItem.rpFirst { padding-top:10px; } .RadPanelBar_LeftMenu .rpRootGroup > .rpItem.rpLast { padding-bottom:10px; } /* ================================================================================ CONTAINER LAYOUT'S ================================================================================ */ .ContainerHeader { } .ContainerContent {} .ContainerFooter { } /* ===================================================================================================================== AGENDA / KALENDER ===================================================================================================================== */ .UserMode0 .ThemeDefault input[type="image"] { visibility:hidden!important; } .ContentPane .ModDNNEventsC table { /* max-width:640px!important; */ background:transparent!important; } .ThemeDefault .Event { /* min-width:560px!important; ???? */ background:transparent!important; } .ThemeDefault .Event td { border-style:solid!important; border-width:2px!important; border-color:#ffffff!important; } .ThemeDefault > div > table > tbody > tr:first-child > td, .ThemeDefault .EventTodayDay { background:transparent!important; background-color:transparent!important; background-image:none!important; } .ThemeDefault .EventDay { color:#e1007a!important; } /* MA, DI, WO.. */ .ThemeDefault .EventDayHeader { border-width:0px!important; /* overwrite */ padding:5px 0px 5px 0px!important; text-transform:uppercase; font-family: Arial, Sans-Serif!important; font-size:15px!important; line-height: 125%!important; border-radius:8px 8px 0px 0px; /* box-shadow:1px 1px 3px 0px rgba(0,0,0,0.33) inset; */ } /* titel maand "Sept 2013" */ .ThemeDefault td.EventNextPrev + td { font-family:font-family: 'Ubuntu', Arial, sans-serif; font-size:28px!important; line-height:30px!important; font-weight:bold!important; /* als h1 */ font-style:normal!important; padding-bottom:10px!important; margin-top:0px!important; background-color:#ffffff!important; background-repeat:repeat-x!important; background-position:left bottom!important; width:33%!important; } /* @@@@@@@@@@ KLEUR GROTE TITEL */ .ThemeDefault td.EventNextPrev + td { color:#336799!important; } /* @@@@@@@@@@ GROTE BALK MA/DI/WO */ .ThemeDefault .EventDayHeader { background-color:#336799!important; color:#ffffff!important; } /* .s_STIP .ThemeDefault .EventDayHeader { background-color:#003673!important; color:#ffffff!important; } */ .ThemeDefault .EvtHdrMdlCol { } .ThemeDefault .EvtHdrLftCol, .ThemeDefault .EvtHdrRgtCol { display:none; } #Wrapper .ThemeDefault .EvtHdrMdlCol { width:88%!important; } .ThemeDefault .EventDay .EventDayScroll > div > a { background-color:transparent!important; } .ThemeDefault, .ThemeDefault table, .ThemeDefault tr, .EventNextPrev, .EventNextNext, .ThemeDefault .EventTitle, .ThemeDefault .EventTitle table, .ThemeDefault .EventTitle table tr, .ThemeDefault .EventTitle table td { line-height:100%!important; border:none!important; background-image:url(images/transp.png)!important; background-repeat:repeat!important; background-color:transparent!important; } /* bij uitloggen/view hide buttons week/lijst/edit */ .UserMode0 .ThemeDefault td input[type="image"] { visibility:hidden!important; } .UserMode0 .ThemeDefault .CommandButton:first-child /* eerste knop "vandaag" bij niet inloggen, marge om te boel te centreren */ { margin-left:90px!important; } /* links vandaag / bekijk / ok */ .ThemeDefault .CommandButton { font-weight:bold!important; display:inline-block!important; padding:5px 10px 4px 10px!important; margin-top:1px!important; margin-right:5px!important; width:auto!important; border-radius:4px; cursor:pointer!important; border-style:none!important; border-width:0px!important; border-image:none!important; /* box-shadow:1px 1px 3px 0px rgba(0,0,0,0.33); */ } .ThemeDefault .CommandButton .CommandButton { padding:0px!important; margin:0px!important; } /* agenda item ga terug dubbel... */ .ThemeDefault .CommandButton:hover { text-decoration:none!important; } .ThemeDefault .CommandButton:hover { color:#ffffff!important; } /* datum edit field dd-mm-yy */ .ThemeDefault .NormalTextBox[type="text"] { height:15px!important; /* 20px hoogte -2px (borde) -6px (padding) */ padding:3px!important; border-radius:4px; /* font-weight:bold!important; */ color:#003673!important; border-width:1px!important; border-style:solid!important; /* box-shadow:1px 1px 3px 0px rgba(0,0,0,0.33); */ width:70px!important; } .ThemeDefault .CommandButton[type="button"] { padding:0px 0px 0px 0px!important; margin-left:10px!important; border-radius:4px; /* */ cursor:pointer!important; border-style:none!important; border-width:0px!important; border-image:none!important; /* box-shadow:1px 1px 3px 0px rgba(0,0,0,0.33); */ height:20px!important; width:45px!important; margin-bottom:30px!important; /* ruimte maken voor titel, bv "<< Juli 2013 >>" */ } /* HEADER */ .ThemeDefault .EventTitle, .ThemeDefault .EventTitle td /* maand header */ { top:-5px!important; position:relative!important; color:#e1007a!important; font-family:'Bitter', sans-serif!important; /* font-weight:600; */ font-weight:400!important; font-size:28px!important; font-style:italic!important; text-transform:capitalize; white-space:nowrap!important; } /* vorige/volgende maand */ .ThemeDefault .EventTitle A { font-size:20px!important; /* color:#f03673!important; */ font-style:normal!important; text-transform:lowercase; } .ThemeDefault .EventTitle .EventNextPrev { white-space: nowrap!important; padding-top:10px!important; } .ThemeDefault .EventTitle .EventNextPrev A { font-size:11px!important; font-weight:bold!important; display:inline-block!important; padding:0px 10px 4px 10px!important; margin-top:1px!important; margin-right:5px!important; line-height:22px!important; width:auto!important; border-radius:4px; height:20px!important; cursor:pointer!important; border-style:none!important; border-width:0px!important; border-image:none!important; /* box-shadow:1px 1px 3px 0px rgba(0,0,0,0.33); */ } .ThemeDefault .EventTitle .EventNextPrev:first-child A:before { content:"<< "; } .ThemeDefault .EventTitle .EventNextPrev:last-child A:after { content:" >>"; } .ThemeDefault .EventTitle .EventNextPrev:last-child A, .ThemeDefault .EventTitle .EventNextPrev:first-child A { text-decoration:none!important; } .ThemeDefault .EventTitle .EventNextPrev:last-child A:hover, .ThemeDefault .EventTitle .EventNextPrev:first-child A:hover { } /* @@@@@@@@@@ KNOPPEN / VELD BOVEN bij agenda EN bij vorige / volgende maand */ .ThemeDefault .NormalTextBox[type="text"] { border-color:#ffb300!important; } .ThemeDefault .EventTitle .EventNextPrev A, .ThemeDefault .CommandButton[type="button"], .ThemeDefault .CommandButton { background-color:#ffb300!important; color:#ffffff!important; } .ThemeDefault .EventTitle .EventNextPrev A:hover, .ThemeDefault .CommandButton[type="button"]:hover, .ThemeDefault .CommandButton:hover { background-color:#d81009!important; color:#ffffff!important; } /* DE TABEL STYLEN, HOGER NIVO HERSTEL */ .ThemeDefault table table { padding:5px!important; border-collapse:separate!important; border-spacing:5px!important; } /* dit is de agend grid */ .ThemeDefault table table table { padding:0px!important; border-spacing:0px!important; } .ThemeDefault table table table, .ThemeDefault table table table tr, .ThemeDefault table table table td { height:auto!important; min-height: } /* ------------- STYLEN DAG BOX (maand/weekend/today) ------------- */ .ThemeDefault .EventDay { /* box-shadow:1px 1px 3px 0px rgba(0,0,0,0.33); */ background-color:rgba(87,87,90,.025)!important; color:#a30875!important; padding:2px 2px 2px 2px!important; width:14%!important; } .ThemeDefault .EventWeekendDay { background-color:rgba(128,128,128,.075)!important; } .ThemeDefault .EventOtherMonthDay {background-color:rgba(128,128,128,.15)!important; } /* TEXT VAN EEN DAG EN DATUM GETAL */ .ThemeDefault .EventDay, .ThemeDefault .EventDay div, .ThemeDefault .EventDay div A { font-weight:normal!important;margin-top:2px!important; text-overflow: ellipsis!important; } .ThemeDefault .EventDay { font-weight:bold!important; font-family:'Bitter', sans-serif!important; font-size:18px!important; line-height: 22px!important; text-overflow: ellipsis!important; color:#40a629!important; } .ThemeDefault .EventDay .EventDayScroll { font-weight:normal!important; font-family:'Arial', sans-serif!important; font-size:13px!important; } /* CURRENT DAY */ .ThemeDefault .EventSelectedDay { /* border:#e1007a 2px solid!important; */ /* box-shadow:1px 1px 3px 0px rgba(242,148,0,0.5) */ } .ThemeDefault .EventTodayDay { border-width:2px!important; border-style:solid!important; border-radius:5px; color:#40a629!important; } /* ------------- STYLEN LINK OP EEN DAG ------------- */ .ThemeDefault .EventDayScroll A { text-decoration:none; font-family: Arial, Sans-Serif!important; font-size:11px!important; line-height: 125%!important; text-overflow: ellipsis!important; } .ThemeDefault .EventDayScroll A:hover { text-decoration:none; } .ThemeDefault .EventTodayDay { border-color:#ffffff!important; } .ThemeDefault .EventDay div A { color:#333333!important;} .ThemeDefault .EventDayScroll A:hover { color:#ffb300!important; } /* ------------- POPUS BIJ HOME ------------- */ .isHome .Eventtooltip { transform:scale(0); opacity:0; position:fixed; top:-200px; display:none; } /* DISABLE HOME */ /* ------------- POPUP BLOCK - alleen deze werkt ------------- */ .ThemeDefault.Eventtooltiptable, .Eventtooltiptable, .ThemeDefault.Eventtooltiptable *, .Eventtooltiptable * { border-radius:15px!important; border-radius:13px / 16px!important; xxxdisplay:block!important; } .Eventtooltipheader { background-color:#004178!important; padding:10px 10px!important; /* background:transparent!important; background-repeat:repeat-y!important; background-attachment:fixed!important; background-position:top center!important; background-image:url(images/transp.png)!important; */ background-image:none!important; background-color:#e74e0f!important; border:none!important; font-family: 'Advent Pro', Helvetica, sans-serif!important; line-height:100%!important; color:#ffffff!important; font-size: 20px!important; font-weight: 700!important; box-shadow:none!important; } .Eventtooltipbody { background-color:#ffffff!important; background-image:url(images/transp.png)!important; background-image:none!important; font-family: Helvetica,Verdana, Arial, Sans-Serif!important; font-size:14px!important; font-weight: normal!important; line-height: 125%!important; text-align:left!important; color:#2c2e83!important; /* padding-bottom:15px!important; padding-top:10px!important; padding-left:20px!important; */ padding:10px 15px 15px 15px!important; border:none!important; border-top:10px solid #fff!important; /* box-shadow:0px 0px 0px 1px #eeeeee inset; -ms-box-shadow:0px 0px 0px 1px #eeeeee inset; -webkit-box-shadow:0px 0px 0px 1px #eeeeee inset; -o-box-shadow:0px 0px 0px 1px #eeeeee inset; -moz-box-shadow:0px 0px 0px 1px #eeeeee inset; */ box-shadow:none!important; } /* TEST CSS3 -- not yet */ /* .ThemeDefault .EventDayScroll a[title]:hover::after { content: attr(title); color: #333; position: relative; z-index: 2000; white-space: nowrap; border-radius: 5px; transform:scale(2)!important; } */ /* ================================================================================ MOBILE MENU ================================================================================ */ #MobMenuWrapper { } #MobileMenu { display:none; width:100%; /* /menu/ js gedoe */ z-index:9000!important;} #MobileMenu * {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #MobileMenu.active #MobiNav { display:block; } .MobileMenuHeader {font-size:50px; font-family: "Ionicons"; line-height:50px; cursor:pointer; color:#ffffff!important; display:none; padding-left:25px!important; } #MobileMenu.active .MobileMenuHeader { color:#ffffff; } /* .MobileMenuHeader.active #MobiNav { transition:all .2s ease-in-out; } */ #MobileMenu.active .MobileMenuHeader:after { content:"\f128"; display:block; position:absolute; margin-top:-50px; left:65px; height:50px; width:50px; font:inherit; font-size:30px; text-align:center; } #MobileMenu .MobileMenuHeader:hover { color:#000000; -webkit-shadow:90px 0px 0px 0px rgba(255,255,255,.33) inset; -ms-shadow:90px 0px 0px 0px rgba(255,255,255,.33) inset; -o-shadow:90px 0px 0px 0px rgba(255,255,255,.33) inset; box-shadow:90px 0px 0px 0px rgba(255,255,255,.33) inset; } #MobileMenu.active .MobileMenuHeader:hover { -ms-box-shadow:120px 0px 0px 0px rgba(255,255,255,.33) inset; -webkit-box-shadow:120px 0px 0px 0px rgba(255,255,255,.33) inset; -o-box-shadow:120px 0px 0px 0px rgba(255,255,255,.33) inset; box-shadow:120px 0px 0px 0px rgba(255,255,255,.33) inset; } #MobiNav { margin:0; text-align:left; display:none; padding:0; } #MobiNav > li.first { padding-top:5px; } #MobiNav > li.last { padding-bottom:5px; } /* -webkit-box-shadow:0px 5px 5px 0px rgba(0,0,0,.33); -ms-box-shadow:0px 5px 5px 0px rgba(0,0,0,.33); -o-box-shadow:0px 5px 5px 0px rgba(0,0,0,.33); box-shadow:0px 5px 5px 0px rgba(0,0,0,.33); */ #MobiNav ul {list-style:none; margin:0; padding:0 0 0 0px; } #MobiNav .item {list-style:none; margin:0; padding:0 0 0 0px; border-top:2px solid rgba(255,255,255,.33); position:relative; color:#fff; font-size:18px; overflow:visible; } /* color = inactive */ #MobiNav li.item .item { border-top:1px dashed rgba(240,240,240,.5)!important; } #MobiNav li:nth-child(1) { border-top:none; } #MobiNav .item { width:100%; overflow:hidden; } #MobileMenu { background:#0069b3; } #MobiNav .item span.disabled, #MobiNav .item a {color:#fff !important; } #MobiNav .item span.disabled, #MobiNav .item a { line-height:20px; min-height:25px; padding-top:15px; line-height:20px; display:inline-block; width:100%; min-height:30px; margin-bottom:0px; } #MobiNav .item span { padding-left:20px; } #MobiNav .item .item span { padding-left:10%; } #MobiNav .item .item .item span { padding-left:20%; } #MobiNav .item .item .item .item span { padding-left:30%; } #MobiNav .item .item .item .item .item span { padding-left:40%; } #MobiNav .item span.disabled { opacity:.67; } #MobiNav .item > .icon { xdisplay:none; } #MobiNav .item > .icon { cursor:pointer; display:run-in!important; position:absolute; top:0px; right:5px; margin-top:8px; height:30px; width:30px; line-height:30px; font-size:22px; line-height:32px; color:#ffffff; text-align:center; /* via .txt ULtokens content:"\f103"!important; */ font-family: "Ionicons"; width:30px!important; height:30px!important; margin-left:15px; /* \f109 \f10a \f10b */ visiblity:hidden; } #MobiNav .item.haschild > .icon { visiblity:visible; } #MobiNav .item.haschild > .icon { background:rgba(255,255,255,.33); } /* KLEUR PIJL DOWN (EXPAND) */ #MobiNav .item.haschild > .icon:hover { background:rgba(255,255,255,.8); } /* KLEUR PIJL DOWN (EXPAND) */ #MobiNav .item a span.breadcrumb { font-weight:700!important; font-style:italic; } #MobiNav .item span.disabled:hover /* HOVER ON DISABLED ITEM */ { background:rgba(255,255,255,.25); } #MobiNav .item a:hover, #MobiNav .item a:active /* HOVER ON ITEM */ { background:rgba(255,255,255,.95); color:#e40050!important; } #MobiNav .item:hover > .icon, #MobiNav .item:active > .icon /* HOVER ON ITEM > DISPLAY EXPAND ICON*/ { background:transparent; color:#e40050!important; } #MobiNav .item > .icon:hover, #MobiNav .item > .icon:active /* HOVER ON EXPAND ICON */ { background:rgba(255,255,255,1)!important; color:#222222!important; } #MobiNav .item a:hoverxx, #MobiNav .item.selected > a { text-decoration:none; color:#ff0!important} #MobiNav .item .subLevel {display:none;} #MobiNav .item.haschild.active > .subLevel {display:block;} #MobiNav .subLevel .item.first {border-top:1px solid #f0f0f0;} #MobiNav .item.last {border-bottom:0;} /* ================================================================================================================================================================ SLIDE CUSTOM DEVELOPING ================================================================================================================================================================ */ /* {..}_H is voor homepage {..}_V is voor vervolgpagina's WEG */ /* ------- edit/view mode no display ------- */ .UserMode1 #bkSlidePane, .UserMode2 #bkSlidePane { /*background:rgba(0,0,0,.025);*/ } /* ------- vlak instellen ------- */ #bkSlidePane { position:absolute; display:block; width:100%; /* overflow:hidden; uit voor text eronder */ height:inherit; min-height:inherit; } .isHome #bkSlidePane { overflow:hidden; } /* grote effect cartoon poppetjes home */ .isSeq #bkSlidePane { overflow:visible; } /* handje kinderen */ .UserMode0 #bkSlidePane { /* -webkit-perspective: 2600px; -webkit-perspective-origin:50% 25%; -webkit-perspective-origin:100% 25%; */ } /* ---------- foto settings ---------- */ #bkSlidePane #FQ0 .bkSlideImg { background-image:url(images/slides/1.jpg); background-color:#87c2ec; } #bkSlidePane #FQ1 .bkSlideImg { background-image:url(images/slides/2.jpg); background-color:#e94e0e; } #bkSlidePane #FQ2 .bkSlideImg { background-image:url(images/slides/3.jpg); background-color:#39aa34; } #bkSlidePane #FQ3 .bkSlideImg { background-image:url(images/slides/4.jpg); background-color:#ffcc01; } #bkSlidePane #FQ4 .bkSlideImg { background-image:url(images/slides/5.jpg); background-color:#951a84; } #bkSlidePane #FQ5 .bkSlideImg { background-image:url(images/slides/6.jpg); background-color:#95c221; } #bkSlidePane #FQ6 .bkSlideImg { background-image:url(images/slides/7.jpg); background-color:#008cd4; } /* SLIDE EFFECTEN */ /* .UserMode0 .bkSlideFlipOut { opacity:0!important; z-index:21!important; -webkit-transform: rotate3d(0, 1, 0, -180deg) translateZ(100px) scaleX(1.25);-ms-transform: rotate3d(0, 1, 0, -180deg) translateZ(100px) scaleX(1.25);-o-transform: rotate3d(0, 1, 0, -180deg) translateZ(100px) scaleX(1.25);-moz-transform: rotate3d(0, 1, 0, -180deg) translateZ(100px) scaleX(1.25); transform: rotate3d(0, 1, 0, -180deg) translateZ(100px) scaleX(1.25); } .UserMode0 .bkSlideFlipIn { opacity:1!important; z-index:22!important; -webkit-transform: rotate3d(0, -1, 0, 0deg) translateZ(0px); -ms-transform: rotate3d(0, -1, 0, 0deg) translateZ(0px); -o-transform: rotate3d(0, -1, 0, 0deg) translateZ(0px);-moz-transform: rotate3d(0, -1, 0, 0deg) translateZ(0px); transform: rotate3d(0, -1, 0, 0deg) translateZ(0px); } */ .UserMode0 #bkSlidePane.goFlip .bkSlideCur, .UserMode0 #bkSlidePane.goFlip .bkSlidePrev, .UserMode0 #bkSlidePane.goFlip .bkSlideNext { /* 14-09-15 : van .67s naar 1.2 */ -ms-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out; -webkit-transform-origin:40% 55%; /* centreer op hoofd */ -ms-transform-origin:40% 55%; /* centreer op hoofd */ transform-origin:40% 55%; /* centreer op hoofd */ /* (!) timing afstemmen op javascript settings var bkSpeedFX */ } /* --- css3 effecten op slides (next, cur, prev > weg) --- */ .bkSlideCur, .bkSlideNext, .bkSlidePrev { opacity:0!important; } /* weg laten gaan vorige slide */ .UserMode0 .bkSlidePrev { z-index:3!important; } .UserMode0 #bkSlidePane .bkSlidePrev { xleft:1105px; /* -ms-transform:translate(-25%,-25%); -webkit-transform:translate(-25%,-25%); transform:translate(-25%,-25%); -ms-transform:scale(.1); -webkit-transform:scale(.1); transform:scale(.1); -ms-transform:scale(1.1); -webkit-transform:scale(1.1); transform:scale(1.1); */ } .UserMode0 #bkSlidePane .bkSlidePrev .bkSlideImg { } /* huidige slide */ .UserMode0 .bkSlideCur { left:0px; z-index:2!important; opacity:1!important; } /* vorige slide weer naar start positie... */ .UserMode0 .bkSlideWeg { visiblity:hidden; } .UserMode0 #bkSlidePane .bkSlideWeg { xleft:-1105px; } /* binnen komen nieuwe slide */ .UserMode0 .bkSlideNext { z-index:1!important; } .UserMode0 .bkSlideNext { -ms-transform:scale(2); -webkit-transform:scale(2); transform:scale(2); /* xleft:-1100px; -ms-transform:scale(.8); -webkit-transform:scale(.8); transform:scale(.8); */ } /* --- css3 effecten teskten (beta!) --- */ .UserMode0 .bkSlideWeg .bkSlideTxt, .UserMode0 .bkSlidePrev .bkSlideTxt, .UserMode0 .bkSlideNext .bkSlideTxt { } .UserMode0 .bkSlideCur .bkSlideTxt { } .UserMode0 .bkSlideWeg .bkSlideImg, .UserMode0 .bkSlidePrev .bkSlideImg, .UserMode0 .bkSlideNext .bkSlideImg { } .UserMode0 .bkSlideCur .bkSlideImg { } /* --- design van slides, afh van vormgeving... borderraduys, shadows, etc. --- */ #bkSlidePane .bkSlide { width:100%; display:block; position:absolute; margin:0px auto; z-index:0; opacity:0; min-height:inherit; height:inherit; } #bkSlidePane .bkSlideImg { min-height:inherit; height:inherit; width:100%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; } /* ================================================================================ MENU'S ================================================================================ */ #Menu { position:relative; z-index:960; isolation:isolate; } .DesktopMenu .RadMenu_MainMenu .rmHorizontal{white-space: nowrap; position:relative; display: flex;} .DesktopMenu .RadMenu_MainMenu ul, .DesktopMenu .RadMenu_MainMenu li { margin:0px; padding:0px; list-style:none;} /* !!!!!!!!!! Fake RadMenu */ /* --ROOT-- */ .DesktopMenu .rmHorizontal .rmSlide {display:block !important; box-sizing:border-box; z-index:111; top:100%; left:0; overflow:hidden; height:0; position: absolute; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmLast > .rmSlide {left:auto; right:0} .DesktopMenu .rmHorizontal .rmGroup {opacity:0; transition:opacity 0.3s ease, transform 0.3s ease; transform:translate(0,-10px); } .DesktopMenu .rmHorizontal .rmItem {margin: 0px; padding: 0px; position: relative; clear: none; } .DesktopMenu .rmHorizontal .rmItem .rmLink { margin: 0px; padding: 0px; cursor:pointer; text-decoration:none; height:35px; width:auto; /* -2x 4px width */ display: block; background-color:rgba(255,255,255,.25); margin-left:12px;color:#fff; border-radius:15px; box-shadow:0px 1px 2px 0px rgba(0,0,0,.1), 0px 1px 2px 0px rgba(255,255,255,.33) inset; } .DesktopMenu .rmHorizontal .rmItem .rmLink .rmText{margin: 0px; display: block; white-space: normal; text-align:center; padding:0px 10px; font-size:18px!important; color:inherit!important; font-family:'Advent Pro', sans-serif; font-weight:600; text-decoration: none !important; line-height:35px!important;} /*first,last,only*/ .DesktopMenu .rmHorizontal .rmItem.rmFirst{} .DesktopMenu .rmHorizontal .rmItem.rmLast {} .DesktopMenu .rmHorizontal .rmItem.rmOnly {} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink {color:#fff; background-color:#f49b00; } .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText {color:#fff; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText {color:#fff; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#fff; } /*--SUB--*/ .DesktopMenu .rmHorizontal .rmLevel0 .rmGroup {transform:translate(-20px, 0px); } .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide { overflow:visible; height:auto; transform:translate(0px, 0px); padding:0px; border-radius:15px; display:none; display:none !important;} .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide > .rmGroup {opacity:1; transform:translate(0px, 0px); display:none !important;} .DesktopMenu .rmHorizontal .rmSlide .rmItem:hover .rmSlide {left:100%; top:0;} .DesktopMenu .rmHorizontal .rmGroup .rmItem {width:100%; margin:0; display:none !important;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink {margin:0; padding:0; width:100%; display:block;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText{ min-width:175px; color:#fff; line-height:40px; font-size:18px; padding:0 30px; white-space:nowrap;} /*first,last,only*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst {} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst > .rmLink > .rmText{} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmLast > .rmLink > .rmText{} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmOnly > .rmLink > .rmText{} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText {color:#ff00ff} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText {color:#ff00ff} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#ff00ff} /* !!!!!!!!!! Fake Panelbar / submenu */ .DesktopMenu ul.rmRootGroup.rmVertical {width:100%; position: relative; z-index: 100; margin-bottom:30px;} .DesktopMenu .rmVertical .rmSlide {position:static} .DesktopMenu .rmVertical .rmGroup{transform:translateY(0px); transform:translateX(0px);} .DesktopMenu .RadMenu ul.rmRootGroup{ background-color:transparent; border:0;} .DesktopMenu .rmVertical .rmItem {padding:0px 0} .DesktopMenu .rmVertical .rmItem .rmLink { border: none !important; cursor: pointer; background-color: transparent!important; background-repeat: no-repeat; background-position: 175px center; display: inline-block; white-space: normal; width: auto; padding-top: 20px; padding-left:0;} .DesktopMenu .rmVertical .rmItem .rmLink .rmText{ padding:0px 0px 0px 0px!important; border: 0px !important; display:inline-block; white-space: normal; width:auto; max-width:auto; min-width:50px; min-height:25px; line-height:25px; font-weight:normal; font-size: 20px!important; font-family: 'Advent Pro',Arial; font-weight: 700; color:#008ad1;} .DesktopMenu .rmVertical .rmSlide {display:none !important} .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide {display:block !important; height:auto; } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide > .rmGroup {opacity:1} /*sub*/ .DesktopMenu .rmVertical .rmSlide .rmItem {padding-left:20px;} /*expanded,hover,selected,breadcrumb */ .DesktopMenu .rmVertical .rmItem .rmLink:hover { text-decoration:none !important} .DesktopMenu .rmVertical .rmItem:has(.rmSlide:hover) > .rmLink > .rmText { color:#f49b00; } .DesktopMenu .rmVertical .rmItem:hover > .rmLink > .rmText { color:#f49b00; } .DesktopMenu .rmVertical .rmItem .rmSelected > .rmLink > .rmText { color:#f49b00; } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmLink > .rmText { color:#f49b00;} /* ================================================================================================================================================================ RESPONSIVE ================================================================================================================================================================ */ /*------------------------------------------------------------------------------------------------------------ 980 --------------------------------------------------------------*/ @media only screen and (max-width: 1020px) { #barFoot #footLogo { -webkit-transform:scale(.9) translate(-20px,0px); -ms-transform:scale(.9) translate(-20px,0px); transform:scale(.9) translate(-20px,0px); } } /* ------------------------------------------------------------------------------------------------------------ 980 -------------------------------------------------------------- */ @media only screen and (max-width: 980px) { /* =========== VLAKKEN ONDER ELKAAR ============ */ .ww50.wwL .Vlak, .ww50.wwR .Vlak { float:left; clear:both; } .ww50 { width:100%; } /* #barAgd .Blok, #barNews .Blok { max-width:450px; } #barNews .ww50.wwL .Vlak { margin-bottom:25px; } #barAgd .ww50.wwL .Vlak { margin-bottom:50px; } } */ #barFoot.rijWrap .Blok, .isHome .rijWrap .Blok { max-width:450px; } .rijWrap .ww50.wwL .Vlak { margin-bottom:25px; } .rijWrap .ww50.wwL .Vlak { margin-bottom:50px; } #barNews h1 { min-height:0px; margin-bottom:13px; } #barFoot .Vlak { margin-bottom:10px; } #barFoot #footLogo { -webkit-transform:scale(.9) translate(0px,0px); -ms-transform:scale(.9) translate(0px,0px); transform:scale(.9) translate(0px,0px); } .isWijd #SeqBlok { width:95%; padding-left:0; } .LEFTOUT { left:0px; } .isHome #HeaderWrap { min-height:350px; height:350px; } .isHome .pubTitle { min-height: 0px; } #MenuWrapper { } .ContentPane { max-width:100%; width:100%; padding:0; margin:0; } /* ============ HEADER / MENU ================*/ .HomeText, #Breadcrumb {display:none;} .RadMenu, #BreadcrumbWrapper #Breadcrumb, .SubMenu {display:none;} /* ============ SEQ PAGES ================*/ #LeftMenu { display:none!important; } #SeqBlok { clear:both; width:92%; margin-left:4%; } #SeqBlok .Blok { xwidth:100%!important; xmax-width:100%!important; } #LeftMenu div.RadPanelBar_LeftMenu ul.rpRootGroup {width:90%!important; max-width:90%; } .RadPanelBar_LeftMenu .rpRootGroup .rpItem { float:left!important; width:auto!important; display:inline-block!important; position:relative!important; } } /* ------------------------------------------------------------------------------------------------------------ 960 -------------------------------------------------------------- */ @media only screen and (max-width: 960px) { /* =========== RESPONSIVE MENU ============ */ #MobileMenu { display:block; } #headWebred, #Menu {display:none;} .MobileMenuHeader, .MobileMenuHeader.active ~ #MobiNav {display:block;} .RadPanelBar_LeftMenu { display:none; } #bkSlidePane .bkSlideImg { background-position: 250px center; } #SeqBlok { padding-bottom:60px; } #bkSlidePane .bkSlideImg { background-size: auto 85%!important; background-position: 75px center; } } /* ------------------------------------------------------------------------------------------------------------ 850 -------------------------------------------------------------- */ @media only screen and (max-width: 750px) { #bkSlidePane .bkSlideImg { background-size: auto 85%!important; background-position:60px center; } } /* ------------------------------------------------------------------------------------------------------------ 700 -------------------------------------------------------------- */ @media only screen and (max-width: 700px) { .isWijd #SeqBlok { width:auto; } } /* ------------------------------------------------------------------------------------------------------------ 560 -------------------------------------------------------------- */ @media only screen and (max-width: 560px) { .logoKlik img { width:180px; } /* org 215px wid */ #bkSlidePane .bkSlideImg { background-size: auto 75%!important; background-position: -25px center; } #barAgd .Blok, #barNews .Blok { max-width:100%; } .Blok { margin:0px 2%; width:96%; } .pubCont{ width:95%; padding-right:10px; } #barNews .pubImg { display:none!important; } #barNews .pubCont { margin-left:0px; } #barNews .ww50 > .Vlak { width:96%; margin-left:2%; } #barAgd .ww50 > .Vlak { width:96%; margin-left:2%; } #barAgd input[type=text] { margin-right:50px!important; width:92%!important; } /* #footLeft { left:-50px; } #footRight { display:none; } */ #footRight #map-canvas { width:95%; } .Blok h1 { font-size: 40px!important;} } /* ------------------------------------------------------------------------------------------------------------ 490 -------------------------------------------------------------- */ @media only screen and (max-width: 490px) { #bkSlidePane .bkSlideImg { background-size: auto 75%!important; background-position: -70px 90px; } .Blok h1 { font-size: 35px!important;} .isHome h1 { font-size: 40px!important;} #dnn_ContentPane > h1, h1 { padding-bottom:0px; } .ThemeDefault td.EventNextPrev + td { font-size:18px!important; line-height:45px!important; } a.knopGroot { font-size: 18px!important; } .isHome .Vlak .pubTitle { padding-bottom:10px; } /* intro-tekst wordt niet gevuld */ #rij_seq .pubArticleList .pubItem td { display:inline-block; } #rij_seq .pubArticleList .pubItem .pubContent { padding:0px 0px 20px 0px; } #rij_seq .pubArticleList .pubItem .pubTitle { padding-top:0px; } #rij_seq .pubControls { display:none; } } /*------------------------------------------------------------------------------------------------------------ 360 = SUPERSMALL --------------------------------------------------------------*/ @media only screen and (max-width: 360px) { #bkSlidePane .bkSlideImg { background-size: auto 70%!important; background-position: -90px 90px; } .pubCont{ width:90%; padding-right:5px;} #footLeft { /* -webkit-transform:scale(.8); -webkit-transform-origin:left top; */ } .isHome .Blok h1 { font-size: 30px!important;} .isSeq .Blok h1 { font-size: 24px!important;} }